<template>
	<el-breadcrumb  style="padding: 30px;">
	   <el-breadcrumb-item>首页</el-breadcrumb-item>
	   <el-breadcrumb-item>大屏状态管理</el-breadcrumb-item>
	   <el-breadcrumb-item>车型探索设置</el-breadcrumb-item>
	</el-breadcrumb>
	<el-button class="mb20" @click="add" type="primary">新增</el-button>
	<el-table class="mb20" :data="tableData" border style="width: 100%">
		<el-table-column prop="title" label="标题" width="150" />
		<el-table-column prop="orders" label="排序" width="150"  />
		
		
		
	
		<el-table-column
	          prop="img"
	          label="小图"
	          width="500"      
	        >
	          <template #default="scope">		  
	              <el-image
	                  style="width: 100%; "
	                  :src="ifImgHeader(scope.row.img)"
	                  :preview-src-list="[ifImgHeader(scope.row.img)]"
	                >
	                </el-image>
	          </template>
	        </el-table-column>
		<el-table-column
		      prop="bigimg"
		      label="大图"
		      width="500"      
		    >
		      <template #default="scope">		  
		          <el-image
		              style="width: 100%; "
		              :src="ifImgHeader(scope.row.bigimg)"
		              :preview-src-list="[ifImgHeader(scope.row.bigimg)]"
		            >
		            </el-image>
		      </template>
		    </el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button size="mini"
					@click="edit({row:scope.row,index:scope.$index},(x)=>{edites(x)})">
					编辑</el-button>
				<el-button size="mini" type="danger" @click="removeModal({row:scope.row,index:scope.$index})">删除</el-button>
				
				
			</template>
		</el-table-column>
	</el-table>
	
	<el-dialog v-model="modalState" title="标题">
		<el-form :model="form" ref="rule" :rules="rules">
			
			<el-form-item label="标题"  prop="title" :label-width="formLabelWidth">
				<el-input v-model="form.title" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="排序"  prop="orders" :label-width="formLabelWidth">
				<el-input v-model="form.orders" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="大图" :label-width="formLabelWidth">
				<el-upload class="avatar-uploader" 
						    :action="`${api}/index.php/index/goods/uploadfile`"
							 :data="jm()"
					:show-file-list="false" 
							:on-success="(file)=>{editImgsProps({file,key:'bigimg'})} ">
					<img v-if="form.bigimg" :src="ifImgHeader(form.bigimg)" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
						
			</el-form-item>
           <el-form-item label="小图" :label-width="formLabelWidth">
           	<el-upload class="avatar-uploader" 
			    :action="`${api}/index.php/index/goods/uploadfile`"
				 :data="jm()"
           		:show-file-list="false" 
				:on-success="(file)=>{editImgsProps({file,key:'img'})} ">
           		<img v-if="form.img" :src="ifImgHeader(form.img)" class="avatar" />
           		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
           	</el-upload>
			
           </el-form-item>
		   <el-form-item label="详情图" :label-width="formLabelWidth">
			   
		   	<ul class="el-upload-list el-upload-list--picture-card">
		   		<Draggable :list="picfileList" :animation="100" item-key="id" class="list-group"
		   		    :forceFallback="true"
		   			ghost-class="ghost" 
		   			>
		   			<!-- @change="onMoveCallback" -->
		   			<template #item="{ element,index }">
		   
		   				<div style="display: inline-block;">
		   
		   					<li class="el-upload-list__item is-success">
		   						<img class="el-upload-list__item-thumbnail" :src="ifImgHeader(element)" alt="">
		   
		   						<i class="el-icon-close"></i>
		   						<i class="el-icon-close-tip">press delete
		   							to remove</i>
		   						<span class="el-upload-list__item-actions">
		   							<!-- <span @click="handlePictureCardPreview(element.response.data)"
		   								class="el-upload-list__item-preview"><i class="el-icon-zoom-in"></i></span> -->
		   							<span @click="handleRemove(index)" class="el-upload-list__item-delete"><i
		   									class="el-icon-delete"></i></span>
		   						</span>
		   					</li>
		   				</div>
		   			</template>
		   		</Draggable>
		   
		   	</ul>
		   	<el-upload :action="`${api}/index.php/index/goods/uploadfile`" 
		   	    :show-file-list="false"
				 :data="jm()"
		   		list-type="picture-card" 
		   		:on-success="edit360" :auto-upload="true">
		   		<i class="el-icon-plus"></i>
		   	</el-upload>
		   
		   	<el-dialog v-model="dialogVisible">
		   		<img style="width: 100%;" :src="dialogImageUrl" alt="" />
		   	</el-dialog>
		   	
		   </el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="modalState = false">取消</el-button>
				<el-button type="primary" @click="submit('rule')">确定</el-button>
				
			</span>
		</template>
	</el-dialog>
	
</template>

<script lang="ts">

			
    import Draggable from 'vuedraggable'
	import QRCode from 'qrcodejs2'
	import moment from "moment"
	import editorWang from '../components/wangEnduit'
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	export default {
		components:{
			editorWang,Draggable
		},
		watch:{
			times(){
				this.form.starttime=this.times[0];
				this.form.endtime=this.times[1];
			},
		},
		data() {
			return {
				types:{
					1 :"关于光阳",
				    2 :"车型视频",
					3 :"换电视频",
					4 :"车型海报",
					5 :"最新活动",
				},
				video:"http://gyyjggadmin.hansn.cn/uploads/avatar/",
				viewarr:[],
				modalStatewins:false,
				hdqtxmname:"",//     名称
				hdorders :"",//   加排序
				numbers :"",//  手机
				modalStatewin:false,
				qrcode:null,
				modalStatecode:false,
				vtimes:['',''],
				formLabelWidth: '120px',
				times:"",
				form: {
					title:"",
					img:"",
					videos:"",
					bigimg:"",
					type:"1",
					orders:"",
					content:""
					
				},
				tableData:[],
				rules: {
				        
						
						
				},
				pid: [],
				picfileList:[]
			}
		},
		mounted() {
			this.getData();		
		},
		methods: {
			handleRemove(index) {
				this.picfileList.splice(index, 1);
			},
			edit360(res, file, fileList) {
			    console.log(res.data)
				this.picfileList.push(res.data);
			},
			edites(data){
				
				var data =JSON.parse(JSON.stringify(data.row))
				this.picfileList=data.content;
				
			},
			
           
			getData() {
				this.$http.post("/index.php/index/goods/goodseditlist").then(data => {
					
					this.tableData=data.data;

				})
			},
			submit(ref) {
				console.log(this.$refs)
				this.form.content=this.picfileList;
				this.doRules(this.$refs[ref]).then(()=>{
					if (this.id) this.form.id = this.id;
					this.$http.post(this.id ? '/index.php/index/goods/goodsedit' :
					  "/index.php/index/goods/goodsadd",
						this.form).then(data => {
						console.log(data)
						this.modalState = false;
						ElMessage({
							message: this.id ? '编辑成功' : '新增成功',
							type: 'success',
						})
						this.getData();
					})
				})
				
			},
			remove(data){
				this.$http.post("/index.php/index/goods/goodsdel",{id:data.row.id}).then(data => {
					ElMessage({
						message: '删除成功' ,
						type: 'success',
					})
					this.getData();
				})
			},
			handleAvatarSuccess(file) {

				this.form.image = file.data;
			},
			


		}
	}
</script>
